<template>
	<view class="bgcf5">
		<!-- 推荐攻略标题 -->
		<view class="titleA">
			<view class="lf">
				<view class="line"></view>
				<text>{{localData}}-{{funtype}}</text>
			</view>
			<view class="rf">
				<u-tabs :list="list1" @click="clickNav" :activeStyle="{
		        color: '#333',
		        fontWeight: 'bold',
		        transform: 'scale(1.08)'
		    }" :inactiveStyle="{
				            color: '#888',
				            transform: 'scale(1)'
				        }" lineColor="#6c5ddc"></u-tabs>
			</view>
		</view>
		<view class="content1">
			<view class="item" @click="goshow(item._id)" v-for="(item,i) in contentList" :key="i">
				<view class="title">
					{{item.title}}
				</view>
				<view class="item-content">
					<view class="pic">
						<image v-if="item.thumbnail.length" :src="item.thumbnail[0]" mode="aspectFill">
							<image v-else
								src="https://mp-353864e0-55e9-470c-ba50-fc62e6999017.cdn.bspapp.com/cloudstorage/af7573fa-8064-48f7-a439-d32bf1af2c7c.jpg"
								mode="aspectFill">
					</view>
					<view class="text">
						<view class="introduction">
							{{item.introduction}}
						</view>
						<view class="user-content">
							<uni-dateformat :date="item.time" format="MM-dd hh:mm" :threshold="[300000,259200000 ]">
							</uni-dateformat>
							<view class="user">
								<image class="imageTX"
									:src="item.user_id[0].avatar_file?item.user_id[0].avatar_file.url:'https://mp-353864e0-55e9-470c-ba50-fc62e6999017.cdn.bspapp.com/cloudstorage/af7573fa-8064-48f7-a439-d32bf1af2c7c.jpg'"
									mode="aspectFill">
								</image>

								<text
									v-if="item.user_id[0].nickname!=''">{{item.user_id[0].nickname||item.user_id[0].username ||item.user_id[0].mobile||'游客'}}</text>
								<text v-else>{{item.user_id[0].username ||item.user_id[0].mobile||'游客'}}</text>
							</view>
						</view>
						<view class="info">
							<view class="browse">
								<uni-icons type="eye" color="#8adcff" size="13"></uni-icons>
								<text>{{item.view_count}}</text>
							</view>
							<!-- <view class="browse">
								<uni-icons type="chat" color="#8adcff" size="13"></uni-icons>
								<text>{{item.comment_count ? item.comment_count:'评论'}}</text>
							</view> -->
							<view class="browse">
								<uni-icons type="star" color="#8adcff" size="13"></uni-icons>
								<text>{{item.like_count?item.like_count:'点赞' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="copyright">
			州游黔程提供计算服务<br />
			COPYRIGHT©2022-2023<br />
			ZhouYouQianCheng
		</view>
	</view>

</template>

<script>
	import json from '@/json.js';
	const db = uniCloud.database();
	export default {
		data() {
			return {
				list1: [{
					name: '最新',
					type: 'publish_date'
				}, {
					name: '热门',
					type: 'view_count'
				}],
				list1Active: 0,
				type: '',
				funtype: '',
				pageTitle: '',
				columns: [ //贵州省城市数组  索引值为地区代码
					'贵州', '贵阳', '遵义', '六盘水', '安顺', '毕节', '铜仁', '黔西南', '黔东南', '黔南'
				],
				pageList: [{
						type: 0,
						text: '黔俗',
					},
					{
						type: 1,
						text: '黔趣',
					},
					{
						type: 2,
						text: '黔味',
					},
					{
						type: 3,
						text: '亲子游',
					},
					{
						type: 4,
						text: '田园游',
					},
					{
						type: 5,
						text: '自驾游',
					},
				],
				contentList: [],
				localData: ''
			};
		},
		onLoad(option) {
			this.localData = this.columns[option.localCode]
			this.funtype = this.pageList[option.type].text

			this.getIndexData();
			uni.setNavigationBarTitle({
				title: this.funtype
			});
		},
		methods: {
			goshow(e) {
				uni.navigateTo({
					url: "/pages/show/show?articleId=" + e
				})
			},
			// 点击最新和热门
			clickNav(e) {
				this.loadState = true;
				this.contentList = [];
				// console.log(e);
				this.list1Active = e.index;
				this.getIndexData();
			},
			getIndexData() {
				let localData = this.localData
				if (localData == "贵州") {
					var artTemp = db.collection("zyqc_art").where({
						funtype: this.funtype
					}).field(
						"title,user_id,introduction,view_count,like_count,comment_count,thumbnail,funtype,local,publish_date"
					).getTemp();
				} else {
					var artTemp = db.collection("zyqc_art").where({
						local: localData,
						funtype: this.funtype
					}).field(
						"title,user_id,introduction,view_count,like_count,comment_count,thumbnail,funtype,local,publish_date"
					).getTemp();
				}
				let unseTemp = db.collection('uni-id-users').field('_id,username,nickname,avatar_file').getTemp();
				db.collection(artTemp, unseTemp).orderBy(this.list1[this.list1Active].type, 'desc').get().then(res => {
					this.contentList = res.result.data
					// this.loadState = false
				})
			},
		}
	}
</script>

<style lang="scss">
	.titleA {
		display: flex;
		justify-content: space-between;
		padding: 16rpx 26rpx 0;
		margin-top: 16rpx;

		.lf {
			color: #282828;
			font-size: 36rpx;
			display: flex;
			line-height: 50rpx;
			margin: auto;
			margin-left: 0rpx;

			.line {
				margin-right: 18rpx;
				// margin-top: 10rpx;
				width: 6rpx;
				// height: 32rpx;
				background-color: #6c5ddc;
			}
		}

		.rf {
			color: #888888;
			font-size: 30rpx;
			padding-top: 4rpx;

			.iconfont {
				margin-left: 4rpx;
				font-size: 26rpx;

			}
		}

	}
</style>
